<template>
    <div class="c-bottomBtn">

        <button class="ivu-btn ivu-btn-diy ivu-btn-large" type="button" v-show="navIndex > 0" @click="prev">
            <span>上一步</span>
        </button>

        <slot name="center">

        </slot>

       <button class="ivu-btn ivu-btn-diy ivu-btn-large" type="button" @click="next">
             <span>{{prevtext}}</span>
       </button>

       <slot name="right">

       </slot>

    </div>
</template>
<script>
    import {mapState} from "vuex";
    export default {
        props: {
          prevtext:{
            type:String,
            default:"下一步"
          }
        },
        data() {
            return {}
        },
        methods: {
          next(){
             this.$emit("next")
          },
          prev(){
            this.$emit("prev")
          },
        },
        components: {},
        mounted() {

        },
        created() {

        },
        computed:{
          ...mapState([
              "navIndex"
          ])
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {

            })
        },
        beforeRouteUpdate(to, from, next) {
            next(vm => {

            })
        },
        beforeRouteLeave(to, from, next) {
            next(vm => {

            })
        }
    }
</script>

<style lang="less">
    .c-bottomBtn{
      padding: 40px 0;
      text-align: center;

      .ivu-btn-large{
        padding: 8px 35px 9px 35px;
      }
    }

    .ivu-btn-diy{
      color: #fff;
      background-color: #9e2828;
      border-color: #9e2828;
      &:hover{
        color: #fff;
        background-color: #9e2828 * 0.7;
        border-color: #9e2828;
      }
    }
</style>
